odd

@CHARSET
"UTF8"
;

body {
}

body #login {
    text-align: left;
}

.centered {
    position: absolute;
    left: 50%;
    margin-left: -25%;
}

#header {
    float: left;
    width: 850px;
}

#logo {
    float: left;
}

#topBar {
    float: right;
}

#rightBlock {
    float: left;
    width: 549px;
}

#account {
    float: left;
}

#menu {
    float: left;
    font-size: 11px;
    color: #888888;
    width: 100%;
}

#content {
/*width: 96%;*/
    padding: 5px 10px 0px 15px;
}

html * {
    margin: 0; /*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
}

/* GENERAL */

.spinner {
    padding: 5px;
    position: absolute;
    right: 0;
}

body {
    background: #fff;
    color: #333;
    font: 12px arial;
}

a:link, a:visited, a:hover {
    color: #666;
    font-weight: bold;
    text-decoration: none;
}

h1 {
    color: #666666;
    float: left;
    font-weight: bold;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

ul {
    padding-left: 15px;
}

input, textarea {
    background-color: #fcfcfc;
    border: 1px solid #ccc;
    font: 11px verdana, arial, helvetica, sans-serif;
    height: 18px;
    margin: 2px 1px; /*padding: 2px 4px;*/
}

select {
    background-color: #fcfcfc;
    border: 1px solid #ccc;
    margin: 2px 1px; /*padding: 2px 4px;*/
}

textarea {
    height: 320px;
    vertical-align: top;
    width: 600px;
}

input:focus, select:focus, textarea:focus {
    border: 1px solid #b2d1ff;
}

.body {
    float: left;
    width: 99%;
    padding: 10px 0px 0px 10px;
}

/* NAVIGATION MENU */

.nav {
/*border-bottom: 1px dotted #BBBBBB;*/
    background: transparent url(../images/backoffice/dot_338.gif) repeat-x scroll center bottom;
    float: left;
    margin-top: 5px;
    padding: 0px 0px 2px 0px;
    text-align: left; /*width:100%;*/
    width: 100%;
}

.nav h1 {
    background-image: url(../images/backoffice/9points_r.gif);
    background-position: left center;
    background-repeat: no-repeat;
    color: #666666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    padding-left: 15px;
    text-decoration: none;
}

.menuGroup {
    float: right;
}

.menuButton {
    float: left;
    font-size: 8pt;
    padding: 0px 0px 0px 5px;
}

.menuButton a {
    float: left;
    color: #333;
    width: auto;
}

/*
.menuButton a.home {
    background: url( ../images/skin/house.png ) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

.menuButton a.list {
    background: url( ../images/skin/database_table.png ) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

.menuButton a.create {
    background: url( ../images/skin/database_add.png ) center left no-repeat;
    color: #333;
    padding-left: 25px;
}
*/

.menuButton a.home, .menuButton a.list, .menuButton a.button {
    background-image: url(../images/backoffice/arrow_r.gif);
    background-position: left center;
    background-repeat: no-repeat;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    font-weight: normal;
    line-height: 20px;
    overflow: auto;
    padding: 0px 10px 0px 13px;
    text-align: left;
    text-decoration: none; /*width:100px;*/
    margin-bottom: 0px;
}

.breadCrumbs {
    padding: 2px 0px 0px 10px;
}

.breadCrumbs span {
    background-image: url(../images/backoffice/scope_2.gif);
    background-position: left center;
    background-repeat: no-repeat;
    font-size: 10pt;
    padding-left: 15px;
    padding-right: 3px;
    text-align: left;
}

.breadCrumbs span a {
    color: #7A7A7A;
    font-weight: normal;
}

.breadCrumbs span.member {
    display: none;
}

/* MESSAGES AND ERRORS */

.message {
    background: #f3f8fc url(../images/skin/information.png) 8px 50% no-repeat;
    border: 1px solid #b2d1ff;
    color: #006dba;
    margin: 10px 0 5px 0;
    padding: 5px 5px 5px 30px
}

div.errors {
    background: #fff3f3;
    border: 1px solid red;
    color: #cc0000;
    margin: 10px 0 5px 0;
    padding: 5px 0 5px 0;
}

div.errors ul {
    list-style: none;
    padding: 0;
}

div.errors li {
    background: url(../images/skin/exclamation.png) 8px 0% no-repeat;
    line-height: 16px;
    padding-left: 30px;
}

td.errors input {
    border: 1px solid red;
}

/* TABLES */

.body table {
    border: 1px solid #ccc;
    float: left;
    width: 100%
}

.body tr {
    border: 0;
}

.body td, th {
    font: 10pt verdana, arial, helvetica, sans-serif, 新 細 明 體;
    line-height: 14px;
    padding: 2px 5px 2px 5px;
    text-align: left;
    vertical-align: top;
}

.body th {
    background-color: #C7DCEF;
    color: #004080;
    font-size: 10pt;
    font-weight: bold;
    line-height: 17px;
    padding: 2px 6px;
}

.body th a:link, .body th a:visited, .body th a:hover {
    color: #333; /*display: block;*/
    font-size: 12px;
    text-decoration: none;
    width: 100%;
}

.body th.asc a, .body th.desc a {
    background-position: right;
    background-repeat: no-repeat;
}

.body th.asc a {
    background-image: url(../images/skin/sorted_asc.gif);
}

.body th.desc a {
    background-image: url(../images/skin/sorted_desc.gif);
}

.body .odd {
    background: #f7f7f7;
}

.body .even {
    background: #fff;
}

/* LIST */
.list {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.list_type {
    float: left;
    width: 200px;
    margin-bottom: 20px;

}

.list table {
    border-collapse: collapse;
}

.list th, .list td {
    border-left: 1px solid #ddd;
    font-weight: normal;
}

.list th:hover, .list tr:hover {
    background: #b2d1ff;
    cursor: pointer;
    font-weight: normal;
}

.list td a {
    color: #004C4C;
    text-decoration: underline;
    font-weight: normal;
}

.list td a:hover {
    color: #000000;
    text-decoration: underline;
}

.list td a:visited {
    color: #004C4C;
    text-decoration: underline;
}

.list td a:active {
    color: #F2C000;
    text-decoration: underline;
}

.list td .addressData {
    background-color: #FFFFAE;
    color: #666666;
    line-height: 15px;
    padding-left: 5px;
    display: none;
}

.list td .addressData span {
    display: block;
}

/* PAGINATION */

.paginateButtons {
    float: right;
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 1px solid #ccc;
    border-top: 0;
    color: #666;
    font-size: 10px;
    overflow: hidden;
    padding: 10px 3px;
}

.paginateButtons a {
    background: #fff;
    border: 1px solid #ccc;
    border-color: #ccc #aaa #aaa #ccc;
    color: #666;
    margin: 0 3px;
    padding: 2px 6px;
}

.paginateButtons a.prevLink {
    background: url(../images/backoffice/arrow_previous.gif) no-repeat center left;
    padding: 0px 6px 2px 10px;
    border: none;
}

.paginateButtons a.nextLink {
    background: url(../images/backoffice/arrow_next.gif) no-repeat center right;
    padding: 0px 10px 2px 6px;
    border: none;
}

.paginateButtons span {
    padding: 2px 3px;
}

/* DIALOG */

.dialog {
    float: left;
    width: 100%;
}

.dialog .data {
    float: left;
    width: 100%;
    border: 1px solid #ccc;
}

.prop {
    float: left;
    width: 100%;
}

.prop .name {
    float: left; /*padding: 5px;*/
    padding: 5px 5px 5px 30px;
    text-align: left;
    width: 15%;
    white-space: nowrap;
    font-weight: bold;
}

.prop .value {
    float: left;
    text-align: left;
}

.prop .title {
    background-image: url(../images/backoffice/4points_r.gif);
    background-position: left center;
    background-repeat: no-repeat;
    color: #666666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    font-weight: bold;
    height: 20px;
    padding-left: 10px;
    margin-top: 20px;
    text-decoration: none;
}

.prop .fieldTitle {
    background-image: url(../images/backoffice/4points_r.gif);
    background-position: left center;
    background-repeat: no-repeat;
    color: #666666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    font-weight: bold;
    height: 20px;
    padding-left: 10px;
    float: left;
    width: 15%;
}

#tabnav {
    float: left;
    padding-top: 10px;
    width: 100%;
}

#tabnav div {
    border: 1px outset #b2d1ff;
    color: #656565;
    cursor: pointer;
    float: left;
    font-size: 10pt;
    font-weight: normal;
    line-height: 14px;
    margin-right: 0px;
    padding: 2px 12px 2px 5px;
    text-decoration: none;
}

#tabnav div.click, #tabnav div.tabBlur {
    background: #E5E5E5 none repeat scroll 0%;
    color: #0C376E;
    font-weight: bold;
}

#tabContent {
    float: left;
    width: 100%;
    border: 1px dashed #b2d1ff;
}

/* ACTION BUTTONS */

.buttons, .search .button {
    float: left;
    font-size: 10px;
    margin-top: 8px;
    overflow: hidden;
    padding: 0pt 0px 10px 0px;
}

.buttons input, .search .button input {
    width: auto;
    background: #FFFFFF url(../images/skin/shadow.jpg) repeat-x scroll center bottom;
    font-weight: bold; /*background: #fff;*/
}

.buttons input.delete {
}

.buttons input.edit {
}

.buttons input.save {
}

#customAttribute textarea {
    width: 700px;
    height: 60px;
    vertical-align: top;
}

#promotionCode {
    width: 300px;
}

label.error {
    color: red;
    display: none;
}

.body .search {
    width: 100%;
}

.body .searchRow {
    float: left;
    width: 100%;
}

.search .prop {
/*width: 130px;*/
    width: auto;
    font-size: 8pt;
}

.search .prop .name {
    width: auto;
}

.search .prop .value {
/*float: left ;*/
    height: 21px;
    padding: 2px;
}

.search .prop .name {
    background: url(../images/backoffice/4points_r.gif) no-repeat left center;
    padding: 2px 2px 2px 10px;
    color: #666666;
    font-family: Arial, Helvetica, sans-serif;
    float: none;
}

.search .prop .value input {
    color: #004080; /*width: 120px;*/
}

.search .prop .button {
    padding: 13px 20px;
}

.search .prop .button input {
    width: 120px;
}

/* for login */
#login {
/*float:left; */
    position: absolute; /*--絕對定位--*/
    top: 50%;
    left: 50%;
    margin-top: -180px; /*--div高度的一半--*/
    margin-left: -180px; /*--div寬度的一半--*/
    width: 360px;
    height: 204px; /*width: 549px;*/
}

#login #content {
    border-top: 1px solid #346799;
    width: 359px;
    height: auto;
    padding: 0px;
    border: none;
}

#login .data {
    width: 359px;
    height: 350px;
    color: #333333;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    border: 1px solid #346799;;
}

#login #header {
    width: 359px;
    height: 46px; /*background:url(../images/backoffice/header.gif) repeat-x;*/
    background: #FFFFFF;
    color: #155490;
    font-family: arial, helvetica, sans-serif;
    font-size: 19px;
    margin: 0px 0px 1px;
}

#login #header .logo {
    width: 535px;
    height: 45px;
    border-bottom: 1px solid #346799;
    background: url(../images/backoffice/header.gif) repeat-x;
}

#login #header .logo img {
    padding: 8px 10px 10px;

}

#login .data, #login #shadowRight, #login #shadowBottom {
    float: left;
}

#login #left {
    width: 175px;
    height: 303px;
    float: left;
}

#login #right {
    width: 359px; /*height: 303px;*/
    background-color: #f4f4f4;
    float: left;
}

#login #left .msg {
    padding: 11px;
}

#login #left .mailto {
    padding: 21px 11px 11px;
}

#login #left .mailto a:link, #login #left .mailto a:visited {
    font-size: 11px;
    font-weight: normal;
    color: #4168B1;
}

#login #right .prop {
/*width: 339px;*/
    width: 100%;
    height: 27px;
    font-weight: normal;
}

#login #right .prop .name {
    color: #333333;
    font-weight: normal;
    padding: 5px 5px;
    text-align: left;
    width: 110px;
}

#login #right .prop .value {
    width: 225px;
}

#login #right .form .value input {
    background: #FFFFFF;
    border-color: #D7D7D7 rgb(243, 243, 243) rgb(243, 243, 243) rgb(215, 215, 215);
    border-style: solid;
    border-width: 1px;
    color: #330099;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 15px;
}

#login #right .form .value img {
    vertical-align: text-bottom;
}

#login #right .form {
    height: 110px; /*border-bottom: 1px dotted #333333; *//*background: url(../images/backoffice/dot_338.gif) bottom scroll 1px;*/
}

#login input {
    background: none;
    border: none;
}

#login #right .form .prop .button {
    text-align: center;
}

#login #right .message {
    height: 117px;
    color: #000000;
}

#login #right .message .name {
    padding: 10px;
}

#login #right .message .value {
    padding: 10px;
}

#login #right .copyright {
    color: #e9e9e9;
    background-color: #346799;
    height: 50px;
    text-align: center;
    width: 359px;
}

#login #right .copyright span {
/*float: left;*/
    padding: 7px 60px;
    text-align: center;
}

#login #right .message {
    width: 359px;
    padding: 0px;
    margin: 0px;
    background: transparent url(../images/backoffice/dot_338.gif) repeat-x scroll center top;
    border: none;
}

#login #right .message .name {
    font-weight: bold;
    color: #333333;
}

#login #shadowRight {
    width: 12px; /*height: 352px;*/
    background: url(../images/backoffice/login_R_shadow.gif) no-repeat bottom right;
}

#login #shadowBottom {
/*width: 549px;*/
    height: 11px;
    background: url(../images/backoffice/login_B_shadow.gif) repeat-X;
}

/* for point expiry */
#expiry .prop .name {
    font-weight: normal;
    padding-left: 100px;
    text-align: right;
}

#expiry .prop value {
    width: 310px;
}

#expiry .prop .title {
    background: none;
    padding-left: 150px;
}

#expiry .prop .title input {
    vertical-align: middle;
}

#expiry .prop #interval {
    color: #004080;
    font-size: 8pt;
    height: 18px;
}

#expiry .prop .name {
/*padding-left: 100px;*/
}

/* for Overview */
.body .overview {
    width: 100%;
}

.overview .leftPanel {
    float: left;
    width: 70%;
}

.overview .prop {
    font-family: "Arial";
    font-size: 8pt;
    line-height: 20px;
    height: 30px;
}

.overview .prop .fieldTitle {
    width: 200px;
}

.overview .prop .fieldTitle, .overview .prop .title {
    color: #000000;
}

.overview .prop .value {
    float: right;
    text-align: right;
}

.overview .list {
    padding: 10px;
}

.overview .list .prop {
    height: 20px; /*border-bottom: 1px dotted #000000;*/
    background: transparent url(../images/backoffice/dot_338.gif) repeat-x scroll center bottom;
}

.overview .list .prop .name {
    font-weight: normal;
    padding: 0px;
    width: 200px;
}

.overview .list .prop .value {
    text-align: right;
    float: right;
}

.overview .rightPanel {
    width: 220px;
    float: left;
}

.overview .rightPanel .prop {
    height: auto;
    padding-left: 40px;
}

.overview .rightPanel .prop .value {
    text-align: left;
    float: none;
    padding: 5px 10px 5px 13px;
}

.overview .rightPanel span.userName, .overview .rightPanel span.phoneBusiness, .overview .rightPanel span.email {
    display: block;
}

/* for form input  */
.edit .prop {
    font-family: "Arial";
    font-size: 8pt;
    line-height: 20px;
}

.edit .prop .name {
    font-weight: normal;
    padding: 1px 1px 1px 30px;
}

.edit .value input.number {
    width: 60px;
}

.edit .value input.disabled {
    background: #DDDDDD;
}

.edit .value input.street {
    width: 350px;
}

.edit .value input.url {
    width: 240px;
}

.edit .value span input {
    vertical-align: middle;
}

.edit .value .bannerPreview img {
    width: 780px;
    height: 80px;
    display: block;
}

/* for profile addres */
#content .leftBody {
    float: left;
    width: 65%; /*min-width: 65%;*/
}

#content .rightBody {
    float: left;
    width: 30%;
}

.rightBody .block {
    float: left;
    padding: 0px 0px 15px 30px;
}

.rightBody .block .prop .name {
    float: none;
    padding: 0px;
}

.rightBody .block .addressData {
}

.rightBody .block .addressData span {
    display: block;
}

.rightBody .block .addressData span.userName {
    display: none;
}

/* for error debug */
.debug {
    display: none;
}

.debug .message {
    border: 1px solid black;
    padding: 5px;
    background-color: #E9E9E9;
}

.debug .stack {
    border: 1px solid black;
    padding: 5px;
    overflow: auto;
    height: 300px;
}

.debug .snippet {
    padding: 5px;
    background-color: white;
    border: 1px solid black;
    margin: 3px;
    font-family: courier;
}

.messageBlock {
    float: left;
}

#messageBox .data li {
    color: red;
    font-size: 11px;
}

#inprocess {
    margin-top: 200px;
    margin-left: 300px;
    font-size: 10pt;
    color: blue;
    font-weight: bolder;

}

.readonly {
    background-color: #cccccc;
}

.orginialvalue {
    color: blue;
}

.up{
	color:green;
	font-weight:bolder;
	
}

.down{
	color:red;
	font-weight:bolder;
}